<div class="container">
	<div class="well text-center">
		<h1>Home Page</h1>
		
		<p>{{ message }}</p>
	</div>


	<div class="row">
	  <div class="col-md-3 col-xs-4">
	  	<button id="btnOfWaterBill" data-toggle="modal" data-target="#inputModalOfWaterBill" data-backdrop="static" type="button" class="btn btn-primary btn-lg">Water bill</button>
	  </div>
	  <div class="col-md-3 col-xs-4"><button type="button" class="btn btn-primary btn-lg">Water bill</button></div>
	  <div class="col-md-3 col-xs-4"><button type="button" class="btn btn-primary btn-lg">Water bill</button></div>
	  <div class="col-md-3 col-xs-4"><button type="button" class="btn btn-primary btn-lg">Water bill</button></div>
	</div>


</div>


<!-- Modal -->
<div class="modal" id="inputModalOfWaterBill" tabindex="-1" role="dialog" aria-labelledby="inputModalLabelOfWaterBill" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="inputModalLabelOfWaterBill">Water bill Input</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form">
		  <div class="form-group">
		    <label for="bodyNb" class="col-sm-3 control-label">Policy No.</label>
		    <div class="col-sm-9">
		      <input type="text" class="form-control" id="bodyNb" placeholder="Policy No.">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="acctNb" class="col-sm-3 control-label">Account No.</label>
		    <div class="col-sm-9">
		      <input type="text" class="form-control" id="acctNb" placeholder="Account No.">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="am" class="col-sm-3 control-label">Amount</label>
		    <div class="col-sm-9">
		      <input type="text" class="form-control" id="am" placeholder="Amount">
		    </div>
		  </div>
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="waterBillModal" tabindex="-1" role="dialog" aria-labelledby="waterBillModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="waterBillModalLabel">Water bill</h4>
      </div>
      <div class="modal-body">
        <dl class="dl-horizontal">
		  <dt>合同號碼</dt>
		  <dd>100005</dd>
		</dl>
		<dl class="dl-horizontal">
		  <dt>金額</dt>
		  <dd>MOP 100</dd>
		</dl>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Override</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>